<template>
  <div class="g-video-small">
    <div class="g-video-box">
      <!-- box图片部分 -->
      <!-- <div> -->
      <div class="g-video-box-picture">
        <img src="../../assets/logo.png" alt="">
        <span class="g-video-box-cover">
          <video-shade></video-shade>
        </span>
      </div>
      <!-- </div> -->
      <!-- 标题部分 -->
      <div class="g-video-box-title">
        {{title}}
      </div>
      <!-- 用户关注部分 -->
      <div class="g-video-box-user">
        <span>
        <!-- 频道部分 -->
          <span class="g-video-box-channel" style="margin-right:3px;">
            {{'纪录片'}}
          </span>
          <!-- 个人 -->
          <span class="g-video-box-username">
            {{userName}}
          </span>
        </span>

        <!-- 点赞数盒子 -->
        <!-- <span class="g-video-box-praise">
          {{'点赞数'}}
        </span> -->

        <!-- 关注 -->
        <!-- <span class="g-video-box-attention">
          关注
        </span> -->

        <!-- up -->
        <!-- <span class="g-video-box-attention">
          up
        </span> -->

        <!-- 广告 -->
        <!-- <span class="g-video-box-advertising">
          广告
        </span> -->

        <span  class="g-video-box-icon">
          <img class="g-video-box-icon-img" src="../../assets/icon-img/xuanxiang.png" alt="">
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import videoShade from './video-shade.vue'
export default {
//   name: 'FissionFriendsH5VideoSmall',  
  components:{
    videoShade,
  },
  props:{
    className:{
      tpye:String,
      default:'g-video-box-praise'
    },
    text:{
      type:String
    },
    title:{
      type:String
    },
    userName:{
      type:String,
      default:'shishsi'
    }
  },
  data() {
      return {
          
      };
  },  
  mounted() {
      
  },  
  methods: {
      
  },
};
</script>

<style lang="scss" scoped>
.g-video-small{
   // 盒子整体
  .g-video-box{
    display: flex;
    flex-direction: column;
    border-radius: 5%;
    overflow: hidden;
    width: 170px;
    padding-bottom: 10px;
    background-color: pink;
    // 三个div 公共部分
    div {
      margin: 5px 5px 0 5px;
    }
    // 图片部分
    .g-video-box-picture {
      position: relative;
      height: 120px;
      // border-radius: 10%;
      background-color: aqua;
      margin: 0;
      img {
        width: 100%;
        height: 100%;
      }
      .g-video-box-cover {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: rgba(54, 52, 52, 0.1);
        // opacity: 0.3;
      }
    }
    // 标题部分
    .g-video-box-title {
      height: 50px;
    }
    // 用户关注部分
    .g-video-box-user{
      display: flex;
      justify-content: space-between;
      // 频道部分
      span {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
      }
      .g-video-box-channel {
        font-size: 12px;
        border: 1px solid red;
      }
      // 点赞
      .g-video-box-praise {
        background-color: #ffffff;
      }
      // 关注
      .g-video-box-attention {
        background-color: #ccc;
      }
      // 用户名
      .g-video-box-username {
        font-size: 12px;
      }
      // 图标
      .g-video-box-icon {
        height: 25px;
        .g-video-box-icon-img {
          height: 100%;
        }
      }
    }
    // 标签部分
  }
}

</style>